<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../index/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../index/plugins/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.css" media="all">
    <script type="text/javascript" src="../static/bootstrap/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
<div class="demoTable">
    <table class="table table-bordered" id="j_table"></table>
</div>

</body>
<script src="../index/plugins/layui/layui.js"></script>
<script>
    $('#j_table').bootstrapTable({
        method:'get',
        url: 'query',
        responseHandler: function (res) {
            return {
                "rows": res.data,
                "total": res.total
            };
        },
        striped: true,
        pagination: true,
        pageSize: 10,
        pageList: [10, 25, 50, 100, 200],
        pageNumber:1,
        showRefresh:true,
        showToggle:true,
        striped:true,
        sidePagination: 'server',
        queryParamsType: "limit",
        strictSearch: true,
        clickToSelect: true,                //是否启用点击选中行
        queryParams: function (params){
            var pageNumber=(params.offset/params.limit)+1;
            return {
                pageSize: params.limit,
                currentPage:pageNumber
            };
        },
        columns: [
            {
                radio:true
            },
            {
                field: 'name',
                align:'center',
                title: '姓名'
            },{
                field: 'status',
                align:'center',
                title: '状态'
            },{
                title: '操作',formatter:function(value,rowData,rowIndex){
                    var html = "";
                    html += '<a href="javaScript:void(0);" class="btn btn-primary btn-sm" onclick="detail('+rowData.id+')" >详情</a>&nbsp;';

                    return html;
                }
            }]
    });
</script>
</html>